<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>个人账户</title>
    <link rel="stylesheet" href="/css/basic.css" >
    <link rel="stylesheet" href="/css/order.css" >
    <link rel="stylesheet" href="/font-awesome-4.5.0/css/font-awesome.min.css" >
    <link rel="icon" href="/image/icon.png" type="image/png">
    <script src="/js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="/js/order_ajax.js"></script>
  <script type="text/javascript">
      $(function (){
          $("#member-panel").hide();
      });
    function member() {
        $("#customer-panel").hide();
        $("#member-panel").show();
    }
    function customer(){
        $("#member-panel").hide();
        $("#customer-panel").show();
    }

  </script>
</head>
<body>
<div id="top" th:insert="top.html"/>
<br><br><center>
  <a href="javascript:member()">个人账户</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:customer()">收货地址</a>
    <br><br>
  <div id="member-panel">
      <table style="width:581px;border-width:0px; border-style:groove;font-size:large;">
          <tr style="font-weight:bold; border-width:1px; border-style:groove;">
              <td style="text-align: right">email：</td><td th:text="${member.email}"></td>
          </tr>
          <tr style="font-weight:bold; border-width:1px; border-style:groove;">
              <td style="text-align: right">姓名：</td><td th:text="${member.mname}"></td>
          </tr>
          <tr style="font-weight:bold; border-width:1px; border-style:groove;">
              <td style="text-align: right">电话：</td><td th:text="${member.mobile}"></td>
          </tr>
          <tr style="font-weight:bold; border-width:1px; border-style:groove;">
              <td style="text-align: right">地址：</td><td th:text="${member.address}"></td>
          </tr>
          <tr style="font-weight:bold; border-width:1px; border-style:groove;">
              <td style="text-align: right">积分：</td><td th:text="${member.jifen}"></td>
          </tr>
          <tr style="font-weight:bold; border-width:1px; border-style:groove;">
              <td style="text-align: right">余额：</td><td th:text="${member.ye}"></td>
          </tr>
      </table>
  </div>
  <div id="customer-panel">
      <div id="select-consignee" class="order-bar">
          <div class="bar-title">
              <span>收货人信息</span>
              <a href="javascript:ConsigneeOper('member','add')">新增收货人+</a>
          </div>
          <div th:each="customer:${customers}">
              <input type="hidden" name="custID" th:value="${customer.custId}">

              <div th:id="'scn'+${customer.custId}" class="bar-info">
                  <div th:if="${customer.cdefault}=='1'">
                      <div class="selected select-name" onclick="Select(this)" th:text="${customer.sname}"></div>
                      <span class="custID" id="selectedcustID" th:text="${customer.custId}" style="display:none;"></span>
                      <span class="name" id="selectedname" th:text="${customer.sname}" style="display:none;"></span>
                      <span class="address" id="selectedaddress" th:text="${customer.address}"></span>
                      <span class="phone" id="selectedphone" th:text="${customer.mobile}"></span>
                      <span class="default-address">默认地址</span>
                      <a class="edit" th:href="'javascript:editCustomer('+${customer.custId}+')'">编辑</a>
                  </div>
                  <div th:if="${customer.cdefault}=='0'">
                      <div class="select select-name" onclick="Select(this)" th:text="${customer.sname}"></div>
                      <span class="custID" id="selectcustID" th:text="${customer.custId}" style="display:none;"></span>
                      <span class="name" id="selectname" th:text="${customer.sname}"></span>
                      <span class="address" id="selectaddress" th:text="${customer.address}"></span>
                      <span class="phone" id="selectphone" th:text="${customer.mobile}"></span>
                      <a class="edit" th:href="'javascript:deleteCustomer('+${customer.custId}+')'">删除</a>
                      <a class="edit" th:href="'javascript:editCustomer('+${customer.custId}+')'">编辑</a>

                      <a class="edit" th:href="'javascript:setDefault('+${customer.custId}+')'">设为默认</a>
                  </div>
              </div>
          </div><!-- each结束-->
      </div>
  </div>
    <div id="add-panel">
        <div class="title-bar">
            <span class="title">添加联系人</span>
            <span class="close-panel">&times;</span>
        </div>
        <div class="edit-panel">
            <label for="addName">姓名：</label>
            <input id="addName" type="text" name="addName"><br>
            <label for="addPhone">电话：</label>
            <input id="addPhone" type="number" name="addPhone"><br>
            <label for="addProvince">省份：</label>
            <input id="addProvince" type="text" name="addProvince"><br>
            <label for="addCity">城市：</label>
            <input id="addCity" type="text" name="addCity"><br>
            <label for="addAddr">详细地址：</label>
            <input id="addAddr" type="text" name="addAddr">
        </div>
        <button id="add-btn" class="save" onclick="SaveConsignee('member','add')">保存</button>
        <button id="edit-btn" class="save">保存</button>
    </div>

</center>
</body>
</html>